<template>
  <div class="traffic-container">
    <div class="traffic-header">
      <IndexHeader
        :cityOptions="cityOptions"
        :navOptions="navOptions"
        :cityName="cityInfo.cityName"
        screenName="公交大屏"
        :mapList="mapList"
        @cityChange="cityChange">
      </IndexHeader>
    </div>
    <div class="traffic-content">

      <div class="traffic-item traffic-item-left">
        <item-left></item-left>
      </div>

      <div class="traffic-item traffic-item-middle">
        <item-middle></item-middle>
      </div>

      <div class="traffic-item traffic-item-right">
        <item-right></item-right>
      </div>

    </div>
  </div>
</template>

<script>
  import ItemLeft from './Left/index'
  import ItemMiddle from './Middle/index'
  import ItemRight from './Right/index'
  import io from 'socket.io-client'
  import { mapState, mapMutations} from 'vuex'
  import { IndexHeader } from '../common'
  const { defaultData, cityOptions, navOptions, mapLists } = global.dataConfig
  const trafficSocket = io.connect('http://47.98.17.80:9006/')
//  const trafficSocket = io.connect('http://127.0.0.1:9006/')

  export default {
    components: { IndexHeader, ItemLeft, ItemMiddle, ItemRight },
    data () {
      return {
        mapList: mapLists['TrafficLineNetWork'],
//        screenName: defaultData.screenName,
//        cityName: cityInfo.cityName
      }
    },
    computed: {
      ...mapState(['cityInfo']),
      cityOptions () { return cityOptions },
      navOptions () { return navOptions }
    },
    created () {
//      this.onReady()
    },
    methods: {
      ...mapMutations([
        'CITY_INFO',
        'AMOUNT_LINE',
        'MILEAGE_LINE',
        'USER_FLOW_LINE',
        'BUS_WARN_PIE',
        'DAY_TOTAL',
        'OPERATE_DATA',
        'INTERVAL_MILEAGE'
      ]),
      onReady () {
        let that = this
        trafficSocket.emit('join', {cityCode: this.cityInfo.cityCode})
        trafficSocket.on('trafficData', function (data) {
          console.log('traffic-data' + data)
          let newData = JSON.parse(data)
          that.AMOUNT_LINE(JSON.parse(newData.amountLine))
          that.MILEAGE_LINE(JSON.parse(newData.mileageLine))
          that.USER_FLOW_LINE(JSON.parse(newData.userFlowLine))
          that.BUS_WARN_PIE(JSON.parse(newData.busWarnPie).BusLife)
          that.DAY_TOTAL(JSON.parse(newData.yestodayData).list)
          that.OPERATE_DATA(JSON.parse(newData.operateData).list)
          that.INTERVAL_MILEAGE(JSON.parse(newData.intervalMileage))
        })
      },
      cityChange (item) {
        this.CITY_INFO({ item: 'cityName', data: item.label })
        this.CITY_INFO({ item: 'cityCode', data: item.code })
        this.CITY_INFO({ item: 'center', data: item.center })
        trafficSocket.emit('cityChange', {cityCode: item.code})
      }
    }
  }
</script>

<style lang="stylus" scoped>
  @import '../../assets/css/traffic.styl';
</style>
